<template>
  <div class="login-contain">
    <div ref="message" class="message" v-if="s">
      <span>{{ message }}</span>
    </div>
    <div class="inner-text">
      <p>
        <input class="block" ref="username" type="text" value="" placeholder="账号">
      </p>
      <p>
        <input class="block" ref="password1" type="password" placeholder="密码">
      </p>
      <p>
        <input class="block" ref="password2" type="password" placeholder="再次输入密码">
      </p>
      <p>
        <input class="block" ref="name" type="text" value="" placeholder="姓名">
      </p>
      <p>
        <input class="block" ref="phone" type="text" value="" placeholder="手机号码">
        <button @click="downCount" ref="code">{{ tip }}</button>
      </p>
      <p>
        <input class="block" ref="phone" type="text" value="" placeholder="验证码">
      </p>
      <p>
        <select name="build" id="00000" class="block">
          <option v-for="item in houseList" :value="item.houseId">{{ item.name }}</option>
        </select>
      </p>
    </div>

    <div class="login-button">
      <input class="block" type="button" value="注册" @click="reg">
      <br>
      <input v-if="type==='0'" class="block" type="button" value="前往登陆" @click="$emit('login')">
      <br>
      <input v-if="type==='1'" class="block" type="button" value="取消" @click="$emit('cancel')">

    </div>
  </div>
</template>

<script>
import axios from "axios";
import {HOST} from "@/utils/constant";

export default {
  name: "RegisterBlock",
  props: {
    type: String,
    require: true,
  },
  data() {
    return {
      s: false,
      message: '',
      tip: '获取验证码',
      houseList: [],
    }
  },
  created() {

    axios.get(HOST + '/select/house', {
      timeout: 5000,
    }).then(response => {
      console.log(response);
      this.houseList = response.data.data;
    }).catch(err => {
      console.log(err);
    })
  },
  methods: {

    downCount() {
      this.tip = 60;
      this.$refs.code.setAttribute('enable', 'false');
      let _this = this;
      for (let i = 59; i > 0; i--) {
        setTimeout(function () {
          _this.tip = i;
        }, 1000);
      }
      this.$refs.code.removeAttribute('enable');
      this.tip = '获取验证码';
    },
    reg() {
      this.s = false;
      const username = this.$refs.username.value;
      const password1 = this.$refs.password1.value;
      const password2 = this.$refs.password2.value;
      const name = this.$refs.name.value;
      const phone = this.$refs.phone.value;

      if (username === '' || password1 === '' || password2 === '') {
        this.message = '账号或密码不能为空';
        this.s = true;
        return;
      }

      if (password1 !== password2) {
        this.message = '两次输入密码不同';
        this.s = true;
        return;
      }

      if (this.type === '0') {
        //用户注册
        const params = new URLSearchParams();
        params.append('username', username);
        params.append('password', password1);
        params.append('type', this.type);
        // params.append('name', name);
        // params.append('phone', phone);
        axios.post(HOST + '/registered', params, {
          timeout: 5000,
        }).then(response => {
          console.log(response.data);
          if (response.data.result === 'SUCCESS') {
            this.message = '注册成功';
            this.s = true;
          }
        }).catch(err => {
          console.log(err);
        })
      }else{
        //管理员注册
        axios.post(HOST + '/insert/Manager', params, {
          timeout: 5000,
        }).then(response => {
          console.log(response.data);
          if (response.data.result === 'SUCCESS') {
            this.message = '注册成功';
            this.s = true;
          }
        }).catch(err => {
          console.log(err);
        })
      }
    }
  }
}
</script>

<style scoped>
.login-contain {
  width: 500px;
  height: 300px;
  background-color: #f6fafa;
  background-image: url("../assets/login.jpg");
}

.inner-text {
  position: absolute;
  left: 150px;
  top: 30px;
}

.login-button {
  position: absolute;
  left: 150px;
  top: 380px;
}

.block {
  width: 200px;
  margin-top: 10px;
}

.message {
  font-size: 15px;
  color: #ff0000;
  position: absolute;
  left: 180px;
  top: 10px;
}
</style>